<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{$reply['title']}</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link rel="stylesheet" href="../addons/haoman_qjb/images/base.css?v=123654">
    <script src="../addons/haoman_qjb/images/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    html,body,div,p,input,button,artical{padding: 0;margin: 0;border: 0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    ul {list-style: none;}
    html {font-size: 62.5%;}
    input:focus,button:focus {outline: none;}
    html,body {width: 100%;height: 100%;font-size: 0;line-height: 0;overflow: hidden;}
    body {font-family: "Microsoft yahei";}
    .colockbox {
        position: absolute;
        left: 50%;
        margin-left: -49%;
        width: 96%;
        height: 40px;
        overflow: hidden;
        margin-top: 10px;
        color: #000000;
        text-align: center;
        background: rgba(0,0,0,0.3);
        border-radius: 6px;
    }

    .colockbox span {
        float: left;
        display: block;
        width: 10px;
        height: 39px;
        line-height: 39px;
        font-size: 16px;
        font-weight: bold;
        text-align: right;
        color: #ffffff;
        margin-right: 22px;
    }
    </style>

    <script type="text/javascript">
        function countDown(time,id){
            var day_elem = $(id).find('.day');
            var hour_elem = $(id).find('.hour');
            var minute_elem = $(id).find('.minute');
            var second_elem = $(id).find('.second');
            var end_time = new Date(time).getTime(),//月份是实际月份-1
                    data = new Date($.ajax({async: false}).getResponseHeader("Date"));
            sys_second = (end_time-data.getTime())/1000;
            var timer = setInterval(function(){
                if (sys_second > 1) {
                    sys_second -= 1;
                    var day = Math.floor((sys_second / 3600) / 24);
                    var hour = Math.floor((sys_second / 3600) % 24);
                    var minute = Math.floor((sys_second / 60) % 60);
                    var second = Math.floor(sys_second % 60);
                    day_elem && $(day_elem).text(day);//计算天
                    $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
                    $(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟
                    $(second_elem).text(second<10?"0"+second:second);//计算秒杀
                } else {
                    clearInterval(timer);
                }
            }, 1000);
        }
    </script>
</head>

<body>

    <!--倒计时-->
    <section class="section-1 page1" style="background-image: url({if empty($reply['backpicurl'])}../addons/haoman_qjb/images/indexbg.jpg{else}{php echo tomedia($reply['backpicurl'])}{/if});">
        
        <img id="rules" src="../addons/haoman_qjb/images/rules.png" width="140" style="position: absolute;top:20px;left: 5px;">

        <div class="orderForm">
            {if $style == 1}
                {if $reply['start_theme'] == 1}
                <p class="tm">输入您的手机号马上抢红包</p>
                <input type="tel" placeholder="请输入手机号码" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%">活动暂停,请稍等...</a>
                {elseif $reply['start_theme'] == 2}
                <p class="tm">输入口令马上抢红包</p>
                <input type="text" placeholder="请输入口令" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%">活动暂停,请稍等...</a>
                {else}
                <a href="#" id="submit2" style="width: 86%;margin-top:30%;">活动暂停,请稍等...</a>
                {/if}
            {elseif $style ==2}
                {if $reply['start_theme'] == 1}
                <p class="tm">输入您的手机号马上抢红包</p>
                <input type="tel" placeholder="请输入手机号码" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%" onclick="alert('亲！别急哦，活动还没有开始！');">活动还没开始</a>
                {elseif $reply['start_theme'] == 2}
                <p class="tm">输入口令马上抢红包</p>
                <input type="text" placeholder="请输入口令" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%" onclick="alert('亲！别急哦，活动还没有开始！');">活动还没开始</a>
                {else}
                <a href="#" id="submit2" style="width: 86%;margin-top:30%;" onclick="alert('亲！别急哦，活动还没有开始！');">活动还没开始</a>
                {/if}
            <div style="position: relative;top: 10px;display: block;width: 90%;text-align: center;left: 50%;margin-left: -45%;">
                <p class="tm">距离活动开始还剩</p>
                <div class='colockbox' id='colockbox1' style='margin-bottom:5px;'>
                    <div style="margin-left:25px;>
                        <span class='day'>00</span><span class="tm">天</span><span class='hour'>00</span><span class="tm">时</span><span class='minute'>00</span><span class="tm">分</span><span class='second'>00</span><span class="tm">秒</span>
                    </div>
                </div>
                <script>
                    $(function() {
                        countDown('{php echo date("Y/m/d H:i:s", $reply['starttime'])}', '#colockbox1');
                    });
                </script>
            </div>
            {elseif $style ==3}
                {if $reply['start_theme'] == 1}
                <p class="tm">输入您的手机号马上抢红包</p>
                <input type="tel" placeholder="请输入手机号码" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%" onclick="alert('活动结束了，亲！');">来晚了，活动结束了</a>
                {elseif $reply['start_theme'] == 2}
                <p class="tm">输入口令马上抢红包</p>
                <input type="text" placeholder="请输入口令" name="mobile" id="mobile" disabled>
                <a href="#" id="submit2" style="width: 86%" onclick="alert('活动结束了，亲！');">来晚了，活动结束了</a>
                {else}
                <a href="#" id="submit2" style="width: 86%;margin-top:30%;" onclick="alert('活动结束了，亲！');">来晚了，活动结束了</a>
                {/if}
            {else}
                {if $reply['start_theme'] == 1}
                <p class="tm">输入您的手机号马上抢红包</p>
                <input type="tel" placeholder="请输入手机号码" name="mobile" id="mobile">
                <a href="#" id="submit" style="width: 86%">开始抢红包</a>
                {elseif $reply['start_theme'] == 2}
                <p class="tm">输入口令马上抢红包</p>
                <input type="text" placeholder="请输入口令" name="mobile" id="mobile">
                <a href="#" id="submit" style="width: 86%">开始抢红包</a>
                {else}
                <a href="#" id="submit" style="width: 86%;margin-top:30%;">开始抢红包</a>
                {/if}
            {/if}


        </div>
        <div class="orderMsg" style="display: none;">
            <p>fadsfdsfd fasdfdsf</p>
            <a href="javascript:;" class="orderMsg-close">
                <img src="../addons/haoman_qjb/images/close.png">
            </a>
        </div>
    </section>


    <div class="act-rule-wrap" id="rule1" >
        <div class="modal-backdrop" ></div>
        <div class="act-rule" style="z-index: 999999999">
            <h4 style="font-size: 18px;">活动规则</h4>
            <div style="color:#444;padding:18px;line-height:1.7;font-size:15px;word-wrap:break-word;word-break:break-all;">
                {$reply['rules']}
            </div>
            <a class="okbtn" style="padding: 20px;">知道了</a>
        </div>
    </div>



    <script>

    $('#submit').click(function() {

        {if $reply['start_theme'] == 1}

            var tel = $("#mobile").val();
            var realname = "{$nickname}";
            var bValidate = RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|17[0-9]|14[57])[0-9]{8}$/);
            if (tel == '' || !bValidate.test(tel)) {
                alert("手机号码不能为空或是格式错误！");
                $("#mobile").val('');
                $("#mobile").focus();
                return;
            }

            var submitData = {
                    realname: realname,
                    mobile: tel,
            };
            $.post('{php echo $this->createMobileUrl('settel', array('rid' => $rid))}', submitData, function(data) {
            if (data.success == true) {
                location.href="{php echo $this->createMobileUrl('index2', array('rid' => $rid))}";
                return
            } else {
                alert(data.msg);
                $("#mobile").val('');
                $("#mobile").focus();
                return
            }
            },"json")

        {elseif $reply['start_theme'] == 2}

        var tel = $("#mobile").val();
        if (tel == '') {

            alert("口令不能为空！");
            return;
        }

            var submitData = {
                    mobile: tel,
            };
            $.post('{php echo $this->createMobileUrl('checkpw', array('rid' => $rid))}', submitData, function(data) {
            if (data.success == 1) {
                location.href="{php echo $this->createMobileUrl('index2', array('rid' => $rid))}";
                return
            } else {
                alert(data.msg);
                $("#mobile").val('');
                $("#mobile").focus();
                return
            }
            },"json")


        {else}
            location.href="{php echo $this->createMobileUrl('index2', array('rid' => $rid))}";
        {/if}
    });

    $('#rules').click(function() {
        $("#rule1").show();
    });

    $('.okbtn').click(function() {
        $("#rule1").hide();
    });
 

    (function(doc, win) {


        // 分辨率Resolution适配
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
            };

        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

        // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
        (function() {
            return;
            var dpr = scale = 1;
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;
            if (isIPhone) {
                // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他设备下，仍旧使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;

            // 
            var metaEl = "";
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement('div');
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        })();

    })(document, window);
    </script>
</body>
<!-- 微信分享设置 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    // JS分享借用权限开始

    // JS分享借用权限结束

    wx.config({
       debug:false,
       appId: '{$package["appId"]}',
       timestamp: '{$package["timestamp"]}',
       nonceStr: '{$package["nonceStr"]}',
       signature: '{$package["signature"]}',
       jsApiList: [
        {if $reply['share_type'] != 2}'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareWeibo'{/if}
       ]
    });
    var sharedata = {
        "imgUrl" : "{$shareimg}",
        "link" : "{$sharelink}",
        "desc" : "{$sharedesc}",
        "title" : "{$sharetitle}"
    };

    wx.ready(function () {


        {if $reply['share_type'] == 2}
        wx.hideOptionMenu();
        {else if $reply['share_type'] == 1}
        wx.showOptionMenu();
        wx.onMenuShareAppMessage(sharedata);
        wx.onMenuShareTimeline({
            title: '{$sharetitle}', // 分享标题
            link: '{$sharelink}', // 分享链接
            imgUrl: '{$shareimg}', // 分享图标
            success: function () { 
                var submitData = {
                    isshare: 1,
                };
                $.post('{php echo $this->createMobileUrl('setshare', array('rid' => $rid))}', submitData, function(data) {
                    if (data.success == 1) {
                        location.href="{php echo $this->createMobileUrl('index2', array('rid' => $rid))}";
                    } else {
                        alert(data.msg);
                        return
                    }
                },"json")
            },
            cancel: function () { 
                alert("您没有成功分享到朋友圈！");
            }
        });
        wx.onMenuShareQQ(sharedata);
        wx.onMenuShareWeibo(sharedata);
        {else}
        wx.showOptionMenu();
        wx.onMenuShareAppMessage(sharedata);
        wx.onMenuShareTimeline(sharedata);
        wx.onMenuShareQQ(sharedata);
        wx.onMenuShareWeibo(sharedata);
        {/if}
    });

</script>
</html>
